/**
 * 企微官方后台打通
 *
 * 此页面结合了两个功能：
 * 1. QunTool API 的 WebConfig 配置功能（配置 CorpId、Secret、CorpIdOrigin，打通企微官方 API，实现 ExternalUserId、UnionId 获取）
 * 2. 原流量超市的“企业主体管理”和“回调 URL 配置”功能（提供主体名、CorpId、Secret，显示回调配置信息，实现联系人状态实时更新）
 *
 * 回调功能实现原理：
 * 1. 流量超市添加企业主体，生成回调 URL
 * 2. 企微后台的“客户联系”里配置回调 URL
 * 3. 事件发生时，企微后台调用回调 URL
 * 4. 流量超市收到事件后，推送到一个阿里云 MQTT
 * 5. QunTool 后端监听阿里云 MQTT 推送的“指定 corpid 列表”的消息
 *    （这个 corpid 列表就是 WebConfig 中配置的列表。因此，必须在 WebConfig 里配置了 CorpId，回调才能生效）
 *
 * 两个功能有各自的数据源，对于每个企业主体，有三种情况：
 * - WebConfig 配置了，流量超市里没创建主体
 * - 流量超市里创建了主体，但 WebConfig 里没配置
 * - 两边都配置好了
 */
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons'
import { Select, Spin, Button, Tag } from 'antd'
import { ImportantEditModal } from '@/desktop/components'
import { ellipsis } from '@/desktop/styles'
import { CorpDetailView } from './detail/index'
import { EditCorp } from './edit/index'
import { useCorps, useChoosedCorpId, type CorpDetail } from './logics/index'

export function QywxConnect() {
  const { corps, corpsLoading, load: loadCorps, apiConfigs, appsCorps } = useCorps()
  const { corpId, setCorpId } = useChoosedCorpId(corps)

  const [editing, setEditing] = useState<CorpDetail | true | null>(null)
  async function edited(corpId: string) {
    setEditing(null)
    await loadCorps(true) // 保存时 apiConfig 会自行更新数据，因此这里只需加载 apps 的
    setCorpId(corpId)
  }

  const corpOptions = (corps ?? []).map(corp => {
    const label = <div css={s.corpLabel}>
      <span className="name">{corp.corpName ?? corp.corpId}</span>
      {corp.corpName === null ? <Tag>待完善</Tag> : null}
    </div>
    return { value: corp.corpId, label }
  })

  return <>
    <Spin spinning={corpsLoading} delay={300}>
      <h5>企微后台打通</h5>
      <div css={s.corps}>
        <Select
          value={corpId}
          onChange={value => setCorpId(value)}
          options={corpOptions}
          placeholder="选择企业"
          disabled={!corps || !corps.length}
        />
        <Button type="link" icon={<PlusOutlined />} onClick={() => setEditing(true)}>
          添加企业
        </Button>
        <Button type="link" icon={<ReloadOutlined />} onClick={async () => loadCorps()}>
          刷新
        </Button>
      </div>
    </Spin>

    {corps ? (
      <CorpDetailView corpId={corpId} corps={corps} apiConfigs={apiConfigs} edit={setEditing} />
    ) : null}

    <ImportantEditModal
      title={editing === true ? '添加企业' : '修改企业'}
      width="700px"
      open={editing !== null}
      onCancel={() => setEditing(null)}
    >
      {editing !== null ? (
        <EditCorp
          corp={editing === true ? undefined : editing}
          apiConfigs={apiConfigs}
          appsCorps={appsCorps ?? []}
          onCancel={() => setEditing(null)}
          onSave={edited}
        />
      ) : null}
    </ImportantEditModal>
  </>
}

const s = {
  corps: css`
    .ant-select {
      width: 255px;
    }
    .ant-btn {
      padding: 4px 0;
      margin-left: 1.5em;
    }
  `,
  corpLabel: css`
    align-items: center;
    display: flex;
    justify-content: space-between;
    .name {
      flex: 1;
      ${ellipsis};
    }
    .ant-tag {
      background-color: #fff;
      color: #777;
      font-weight: normal;
      margin: 0;
      padding: 0 5px;
      transform-origin: center right;
      transform: scale(0.9);
      flex-shrink: 0;
    }
    .ant-select-selection-item & .ant-tag {
      display: none;
    }
  `,
}
